<template>
  <view>
    <!-- 轮播图区 -->
    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="swiper-list">
      <swiper-item v-for="(item,i) in detail.pics" :key="i" class="swiper-items">
        <image :src="item.pics_big" mode="heightFix" @click="preview(i)"></image>
      </swiper-item>
    </swiper>
    <!-- 商品主题信息区 -->
    <view class="detail-main">
      <!-- 价格 -->
      <view class="detail-price">
        {{detail.goods_price}}
      </view>
      <!-- 商品描述与收藏 -->
      <view class="detail-middle">
        <!-- 描述 -->
        <view class="detail-describe">
          {{detail.goods_name}}
        </view>
        <!-- 收藏 -->
        <view class="star">
          <uni-icons type="star" size="24"></uni-icons>
          <text>收藏</text>
        </view>
      </view>
      <!-- 快递描述 -->
      <text class="text">快递: 免运费</text>
    </view>
    <template>
      <view class="goods_nav">
        <!-- fill 控制右侧按钮的样式 -->
        <!-- options 左侧按钮的配置项 -->
        <!-- buttonGroup 右侧按钮的配置项 -->
        <!-- click 加入购物车 -->
        <!-- buttonClick 立即购买 -->
        <uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick"
          @buttonClick="buttonClick" />
      </view>
    </template>
  </view>
</template>

<script>
  import {
    mapState,
    mapMutations,
    mapGetters
  } from 'vuex'

  export default {
    data() {
      return {
        // 存储商品细节
        detail: {},
        // goodsNav 组件的配置
        options: [{
          icon: 'shop',
          text: '店铺',
          info: 0,
          infoBackgroundColor: '#007aff',
          infoColor: "red"
        }, {
          icon: 'cart',
          text: '购物车',
          info: 0
        }],
        buttonGroup: [{
            text: '加入购物车',
            backgroundColor: '#ff0000',
            color: '#fff'
          },
          {
            text: '立即购买',
            backgroundColor: '#ffa200',
            color: '#fff'
          }
        ]
      };
    },
    methods: {
      // 把 modulesCart 模块中的 addToCart 方法映射到当前页面使用
      ...mapMutations('modulesCart', ['addToCart']),
      // 获取商品详情
      async getGoodsDetail(goods_id) {
        const {
          data: res
        } = await uni.$http.get('/api/public/v1/goods/detail', {
          goods_id
        })
        if (res.meta.status !== 200) return uni.$showMsg
        this.detail = res.message
      },
      // 显示图片预览
      preview(i) {
        uni.previewImage({
          current: i,
          urls: this.detail.pics.map(x => x.pics_big)
        })
      },
      // 点击左侧的图标
      onClick(e) {
        // 如果点击购物车图标,则前往购物车page
        if (e.content.text === '购物车') {
          uni.switchTab({
            url: '/pages/cart/cart'
          })
        }
      },
      // 点击右侧图标
      buttonClick(e) {
        if (e.content.text === '加入购物车')
          // 点击 '加入购物车', 徽标加1
          this.options[1].info++

        // 发送的数据对象有以下六个属性,从 detail 提取出来
        const goods = {
          goods_id: this.detail.goods_id, // 商品的Id
          goods_name: this.detail.goods_name, // 商品的名称
          goods_price: this.detail.goods_price, // 商品的价格
          goods_count: 1, // 商品的数量
          goods_small_logo: this.detail.goods_small_logo, // 商品的图片
          goods_state: true // 商品的勾选状态
        }
        this.addToCart(goods)
      }
    },
    computed: {
      // 调用 mapState 方法,将 cart 组件中的 state.cart[] 数组映射到 goodsDetail
      // ...mapState('模块名',[映射数据1],[映射数据2])
      ...mapState('modulesCart', ['cart']),
      // 调用 mapGetters 方法,将 cart 组件中的 getters.total() 方法映射到 goodsDetail
      ...mapGetters('modulesCart', ['total'])
    },
    watch: {
      total: {
        handler(newVal) {
          // 找到名为 购物车 的  options 中的对象
          const findResult = this.options.find(item => item.text === '购物车')
          // 若存在对象,返回其 info,即购物车徽标数量  
          if (findResult) {
            findResult.info = newVal
          }
        },
        // 首次加载时调用
        immediate: true
      }
    },
    onLoad(e) {
      // 接收传递的参数,给查询函数
      const goods_id = e.goods_id
      this.getGoodsDetail(goods_id)
    }
  }
</script>

<style lang="less">
  .swiper-list {
    height: 750rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .detail-main {
    padding: 10rpx;

    .detail-price {
      color: indianred;
      padding: 10rpx;
    }

    .detail-middle {
      font-size: 14px;
      display: flex;

      .detail-describe {
        width: 80%;
        border-right: 2px solid #efefef;
        padding: 10rpx;
      }

      .star {
        display: flex;
        flex-direction: column;
        margin: auto;
        font-size: 12px;
      }
    }

    .text {
      display: block;
      padding: 10rpx;
      color: gray;
      font-size: 12px;
    }
  }

  .goods_nav {
    border-top: 1px solid #efefef;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
  }
</style>
